<script>
import { mapState } from 'vuex';

export default {
  name: 'contractForm',
  props: {
    enterpriseId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      /* 表单数据对象 */
      formParams: {
        buildingId: '',//租赁楼宇id
        startTime: '',//开始日期
        endTime: '', // 租赁结束日期
        contractUrl: '', // 合同附件url
        contractId: '', // 合同附件id
        type: 0, // 操作类型，添加合同0，续签合同1
        enterpriseId: '', // 企业id
      },
      time: [],
    };
  },
  methods: {
    /* 获取租赁楼宇列表的回调函数 */
    async fetchBuildingList() {
      try {
        await this.$store.dispatch('propetyStore/fetchBuildingList');
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    beforeUpload() {

    },
    async handleRequest({ file }) {
      try {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type', 'contract');
        const { id, url } = await this.$store.dispatch('enterpriseStore/upload', formData);
        this.formParams.contractId = id;
        this.formParams.contractUrl = url;
        this.$message.success('上传文件成功');
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    handleExceed() {
      this.$message.warning('超出上传文件的个数');
    },
    removeUpload() {
      this.formParams.contractUrl = '';
      this.formParams.contractId = '';
    },

    async handleSubmit() {
      const [startTime, endTime] = this.time;
      this.formParams.startTime = startTime;
      this.formParams.endTime = endTime;
      this.formParams.enterpriseId = this.enterpriseId;
      try {
        const addResult = await this.$store.dispatch('enterpriseStore/addContract', this.formParams);
        this.$message.success(addResult);
        this.$emit('success');
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    resetForm() {
      this.formParams = {
        buildingId: '',//租赁楼宇id
        startTime: '',//开始日期
        endTime: '', // 租赁结束日期
        contractUrl: '', // 合同附件url
        contractId: '', // 合同附件id
        type: 0, // 操作类型，添加合同0，续签合同1
        enterpriseId: '', // 企业id
      };
      this.time = [];
      this.$refs.upload.clearFiles();
    },
  },
  computed: {
    ...mapState('propetyStore', ['buildingList']),
  },
  emits: ['success'],
  created() {
    this.fetchBuildingList();
  },
};
</script>

<template>
  <el-form label-width="100px" :model="formParams">
    <el-form-item label="租赁楼宇">
      <el-select size="small" v-model="formParams.buildingId" placeholder="请选择租赁楼宇">
        <el-option v-for="(item) in buildingList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="租赁起止日期">
      <el-date-picker v-model="time" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
    </el-form-item>

    <el-form-item label="租赁合同">
      <el-upload class="upload-demo" action="#" :limit="1" :before-upload="beforeUpload" :http-request="handleRequest" :on-exceed="handleExceed" :on-remove="removeUpload" ref="upload">
        <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;

  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>
